<template>
  <!-- 倒计时提示 -->
  <div class="mnxl-tip" v-if="showTip">模拟训练即将开始
    <span style="color: rgba(0, 255, 93, 1);">
      {{ countdownValue }}
    </span>
    秒后启动
  </div>
  <!-- 步骤条 -->
  <el-steps class="mnxl-steps custom-steps" :active="activeStep" align-center v-if="showSteps">
    <el-step v-for="(step, index) in steps" :key="index" :status="step.status">
      <template #title>
        <div>
          {{ step.title }}
        </div>
      </template>
      <template #description>
        <div v-if="step.description == '1'">
          <div style="visibility: hidden;">
            {{ step.description }}
          </div>
        </div>
        <div v-else>
          {{ step.description }}
        </div>
      </template>
    </el-step>
  </el-steps>
</template>

<script setup>
import { ref, onMounted, computed, inject, onUnmounted } from 'vue'

// 注入父组件提供的数据和方法
const showSteps = inject('showSteps')
const showTip = inject('showTip')

// 倒计时相关状态
const countdownValue = ref(3)

// 步骤自动推进定时器
const stepTimer = ref(null)
// 当前激活的步骤索引（从0开始）
const activeStep = ref(1)


// 是否终止
const isTerminated = ref(false)

// 基本步骤配置，包含每个步骤的标题、描述和时间间隔（毫秒）
const baseSteps = ref([
  { title: '开始', description: '1', interval: 2000 },
  { title: 'Step 2', description: 'Some description', interval: 2000 },
  { title: 'Step 3', description: 'Some description', interval: 2000 },
  { title: 'Step 4', description: 'Some description', interval: 2000 },
  { title: 'Step 5', description: 'Some description', interval: 2000 },
  { title: '结束', description: '1', interval: 2000 }
])




// 启动倒计时函数
const startCountdown = () => {
  return new Promise((resolve) => {
    // 重置倒计时值和显示文本
    countdownValue.value = 3

    showTip.value = true
    showSteps.value = false

    // 启动倒计时
    const timer = setInterval(() => {
      countdownValue.value--
      if (countdownValue.value > 0) {

      } else {

        // 倒计时结束后停止定时器
        clearInterval(timer)
        // 隐藏倒计时提示
        showTip.value = false
        // 显示步骤条
        showSteps.value = true

        // 启动步骤自动推进定时器，根据当前步骤获取对应的时间间隔
        const interval = baseSteps.value[activeStep.value]?.interval || 10000 // 默认10秒
        //
        stepTimer.value = setTimeout(function stepForward() {
          if (activeStep.value < baseSteps.value.length) {
            activeStep.value++
            // 获取下一步的时间间隔
            const nextInterval = baseSteps.value[activeStep.value]?.interval || 10000 // 默认10秒
            stepTimer.value = setTimeout(stepForward, nextInterval)
          } else {
            // 如果已经是最后一步，清除定时器
            clearTimeout(stepTimer.value)
            stepTimer.value = null
          }
        }, interval)

        // 解析 Promise
        resolve()
      }
    }, 1000)
  })
}





// 计算属性：根据终止状态和当前步骤生成步骤列表
const steps = computed(() => {
  // 如果已终止，在当前步骤位置添加红色状态
  if (isTerminated.value) {
    return baseSteps.value.map((step, index) => {
      // 在当前激活步骤添加错误状态
      if (index === activeStep.value) {
        return { ...step, status: 'error' }
      }
      return step
    })
  }

  // 未终止时返回基本步骤
  return baseSteps.value
})

// 终止流程函数
const terminateProcess = () => {
  isTerminated.value = true
  // 清除步骤自动推进定时器
  if (stepTimer.value) {
    clearTimeout(stepTimer.value)
    stepTimer.value = null
  }
  // 可以在这里添加其他终止逻辑，例如清除定时器、发送请求等
  console.log('流程已终止')
}

// 组件销毁时清除定时器
onUnmounted(() => {
  if (stepTimer.value) {
    clearTimeout(stepTimer.value)
  }
})


defineExpose({
  startCountdown,
  terminateProcess
})

onMounted(() => { })
</script>



<style lang="less" scoped>
.mnxl-tip {
  position: absolute;
  width: 984px;
  height: 54px;
  color: #fff;
  background: linear-gradient(270deg, rgba(48, 28, 255, 0) 0%, rgba(35, 55, 255, 0.44) 50%, rgba(46, 72, 255, 0) 100%);
  left: 485px;
  z-index: 3;
  text-align: center;
  line-height: 54px;

  span {
    font-size: 18px;
  }
}

.terminate-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;

  .terminate-btn {
    // 可以根据需要自定义按钮样式
  }

  .terminated-message {
    color: #f56c6c;
    font-weight: bold;
  }
}

// 自定义步骤条样式
.custom-steps {

  // 设置默认文本颜色为白色
  :deep(.el-step__title) {
    color: #ffffff;

    &.is-wait {
      color: #ffffff; // 未到达步骤保持白色
      border-color: #c0c4cc;
    }

    &.is-error {
      color: #f56c6c; // 错误步骤颜色
      border-color: #f56c6c;
    }

    // 将is-process和is-finish放在后面，确保它们能覆盖默认颜色
    &.is-process {
      color: #409eff !important; // 当前步骤文本颜色与原点颜色相同
      border-color: #409eff;
    }

    &.is-finish {
      color: #67c23a !important; // 已完成步骤使用绿色
      border-color: #67c23a;
    }
  }

  :deep(.el-step__description) {

    &.is-wait {
      color: #ffffff; // 未到达步骤保持白色

    }

    &.is-error {
      color: #f56c6c; // 错误步骤颜色

    }

    // 将is-process和is-finish放在后面，确保它们能覆盖默认颜色
    &.is-process {
      color: #409eff !important; // 当前步骤文本颜色与原点颜色相同

    }

    &.is-finish {
      color: #67c23a !important; // 已完成步骤使用绿色

    }
  }

  :deep(.el-step__head) {
    &.is-wait {
      color: #ffffff; // 未到达步骤保持白色

    }

    &.is-error {
      color: #f56c6c; // 错误步骤颜色

    }

    // 将is-process和is-finish放在后面，确保它们能覆盖默认颜色
    &.is-process {
      color: #409eff !important; // 当前步骤文本颜色与原点颜色相同

    }

    &.is-finish {
      color: #67c23a !important; // 已完成步骤使用绿色

    }
  }

  :deep(.el-step__icon) {
    background: transparent;

    &.is-text {
      border-radius: 50%;

      .el-step__icon-inner {
        font-weight: normal;
      }
    }
  }

  :deep(.el-step__line) {
    background-color: #c0c4cc;

    &.is-horizontal {
      height: 2px;
    }
  }

  // 根据步骤状态设置图标背景颜色
  :deep(.el-step__head.is-process .el-step__icon) {
    background-color: #409eff !important;
  }

  :deep(.el-step__head.is-finish .el-step__icon) {
    background-color: #67c23a !important;
  }

  :deep(.el-step__head.is-wait .el-step__icon) {
    background-color: #c0c4cc !important;
  }

  :deep(.el-step__head.is-error .el-step__icon) {
    background-color: #f56c6c !important;
  }

  // 移除步骤点的文字
  :deep(.el-step__head .el-step__icon-inner) {
    display: none;
  }

  // 步骤描述文字换行
  :deep(.el-step__description) {
    word-wrap: break-word;
    white-space: normal;
    text-align: left;
  }
}

.mnxl-steps {
  position: absolute;
  align-items: center;
  z-index: 3;
  left: 485px;
  width: 984px;
  height: 120px;
  min-height: 120px; // 设置最小高度
  background: linear-gradient(270deg, rgba(48, 28, 255, 0) 0%, rgba(35, 55, 255, 0.44) 50%, rgba(46, 72, 255, 0) 100%);
}
</style>